<template>
  <view>
    <view class="box-box">

    <view class="box">

      <view style="text-align: right">
        <view class="default-address">
          {{ $i18n.zhToGlobal('默认地址') }}
          <view class="switch">
            <u-switch
                :inactive-value="false"
                :active-value="true"
                @change="switchChange"
                activeColor="rgb(0, 0, 0)"
                v-model="requestParam.isDefault"></u-switch>

          </view>
        </view>
      </view>


      <view class="form-box">
        <view
            @click="$refs.toolStateAreaPopup.open()"
            class="form-box-item">
          <view class="title">
            {{ $i18n.zhToGlobal('国家或地区') }}
          </view>
          <view
              class="input-box">
            <view class="text text-active"
            v-if="requestParam.stateAreaCode">
              <view class="to">➠</view>{{" "}}{{ $i18n.toGlobal(requestParam.stateAreaCode,"stateArea") }}
              {{" "}}
              <view class="text-code">
                #{{ requestParam.stateAreaCode }}
              </view>
            </view>
            <view class="text"
            v-else>
              <view class="to">➠</view> {{ $i18n.zhToGlobal('请选择国家或地区') }}
            </view>
          </view>
        </view>

        <!-- 一级地址 -->
        <view
            v-if="stateArea&&stateArea.adLevel>=1"
            class="form-box-item"
            @click="$refs.adLevelPopup.open($i18n.zhToGlobal(stateArea.adLevel1Name),stateArea.code)"
        >
          <view class="title">
            {{ $i18n.zhToGlobal(stateArea.adLevel1Name) }}
          </view>
          <view class="input-box">
            <view
                v-if="requestParam.level1Name"
                class="sel-btn is-sel-btn">{{requestParam.level1Name}}</view>
            <view
                v-else
                class="sel-btn">{{ $i18n.zhToGlobal('请选择') }}</view>
          </view>
        </view>

        <!-- 二级地址 -->
        <view
            v-if="stateArea&&stateArea.adLevel>=2"
            @click="openAdLevel2()"
            class="form-box-item">
          <view class="title">
            {{ $i18n.zhToGlobal(stateArea.adLevel2Name) }}
          </view>
          <view class="input-box">
            <view
                v-if="requestParam.level2Name"
                class="sel-btn is-sel-btn">{{requestParam.level2Name}}</view>
            <view
                v-else
                class="sel-btn">{{ $i18n.zhToGlobal('请选择') }}</view>
          </view>
        </view>

        <!-- 三级地址 -->
        <view
            v-if="stateArea&&stateArea.adLevel>=3"
            @click="openAdLevel3()"
            class="form-box-item">
          <view class="title">
            {{ $i18n.zhToGlobal(stateArea.adLevel3Name) }}
          </view>
          <view class="input-box">
            <view
                v-if="requestParam.level3Name"
                class="sel-btn is-sel-btn">{{requestParam.level3Name}}</view>
            <view
                v-else
                class="sel-btn">{{ $i18n.zhToGlobal('请选择') }}</view>
          </view>
        </view>

        <!-- 详细地址与门牌号 -->
        <view class="form-box-item">
          <view class="title">
            {{ $i18n.zhToGlobal('详细地址与门牌号') }}
          </view>
          <view class="input-box">
            <textarea class="input"
                      auto-height
                    v-model="requestParam.detail"
                    :placeholder="$i18n.zhToGlobal('请输入')"></textarea>
          </view>
        </view>

        <!-- 收货人称呼 -->
        <view class="form-box-item">
          <view class="title">
            {{ $i18n.zhToGlobal('收货人称呼') }}
          </view>
          <view class="input-box">
            <input class="input"
                   clearable
                   v-model="requestParam.receiverName"
                   :placeholder="$i18n.zhToGlobal('请输入')"></input>
          </view>
        </view>

        <!-- 电话号码 -->
        <view
            v-if="requestParam.stateAreaCode"
            class="form-box-item">
          <view class="title">
            {{ $i18n.zhToGlobal('电话号码') }}
          </view>
          <view class="input-box">
            <u-row :gutter="'10rpx'">
              <u-col span="2">
               <view
                   @click="$refs.toolPhoneAreaPopup.open()"
                   style="text-align: center">+{{requestParam.phoneAreaCode}}</view>
              </u-col>
              <u-col span="1">
                <view class="to">-</view>
              </u-col>
              <u-col span="9">
                <input class="input"
                       clearable
                       v-model="requestParam.phone"
                       type="number"
                       :placeholder="$i18n.zhToGlobal('请输入')"></input>
              </u-col>
            </u-row>
          </view>
        </view>


        <!-- 邮政编码 -->
        <view class="form-box-item">
          <view class="title">
            {{ $i18n.zhToGlobal('邮政编码') }}
          </view>
          <view class="input-box">
            <input class="input"
                   clearable
                   v-model="requestParam.postalCode"
                   type="number"
                   :placeholder="$i18n.zhToGlobal('请输入')"></input>
          </view>
        </view>

      </view>
    </view>

  </view>

    <tool-state-area-popup ref="toolStateAreaPopup" @select="selectStateArea">
    </tool-state-area-popup>

    <ad-level-popup
        @select="selectAdLevel"
        ref="adLevelPopup"></ad-level-popup>

    <tool-phone-area-popup ref="toolPhoneAreaPopup" @select="selectPhoneArea"></tool-phone-area-popup>

    <view style="height: 100rpx"></view>

    <view class="bottom">
      <view
          @click="toSave"
          class="add-address">
        <view class="add-text">
          {{ $i18n.zhToGlobal('确定') }}
        </view>
      </view>
      <view style="height: 10rpx"></view>
    </view>

  </view>
</template>

<script>
import toolArea from "@/js/toolArea";

export default {
  data() {
    return {
      toolArea,
      requestParam: {
        stateAreaCode: '',
        level1Name: '',
        level2Name: '',
        level3Name: '',
        level1Code: '',
        level2Code: '',
        level3Code: '',
        detail: '',
        postalCode: '',
        phoneAreaCode: '86',
        phone: '',
        isDefault: false,
        receiverName: ''
      },
      stateArea:{}
    };
  },
  created() {

  },
  onLoad(option) {

    if(!option.id){
      // 修改编码
      uni.setNavigationBarTitle({
        title: this.$i18n.zhToGlobal('保存地址')
      });
    }else{
      // 修改编码
      uni.setNavigationBarTitle({
        title: this.$i18n.zhToGlobal('修改地址')
      });
    }

    console.log(option,'option');
    // 获取所有key并url解码传入requestParam
    let keys = Object.keys(option);
    let requestParam = {};
    keys.forEach((key)=>{
      requestParam[key] = decodeURIComponent(option[key]);
    });
    console.log(requestParam,'requestParam');

    if(requestParam.stateAreaCode){
      uni.showLoading({
        title: this.$i18n.zhToGlobal('加载中'),
      });
      this.$refs.toolStateAreaPopup.selectCode(requestParam.stateAreaCode)
          .then(()=>{
            this.requestParam = requestParam;
            this.requestParam.isDefault = !!requestParam.isDefault;
            this.$forceUpdate();
            console.log(this.requestParam.isDefault,'this.requestParam.isDefault');
            uni.hideLoading();
          });
    }
    this.$forceUpdate();

  },
  mounted() {
  },
  methods: {
    switchChange(value){
      console.log(value,'value');
      this.requestParam.isDefault = value;
      this.$forceUpdate();
    },
    selectStateArea(item) {
      console.log(item,'item');
      if(item.code!==this.requestParam.stateAreaCode){
        this.requestParam.stateAreaCode = item.code;
        this.stateArea = item;
        this.requestParam.level1Name = '';
        this.requestParam.level1Code = '';
        this.requestParam.level2Name = '';
        this.requestParam.level2Code = '';
        this.requestParam.level3Name = '';
        this.requestParam.level3Code = '';
        if(item.phoneAreaCode) {
          let phoneAreaCode = item.phoneAreaCode.split("-");
          this.requestParam.phoneAreaCode = phoneAreaCode[0];
          if (phoneAreaCode.length > 1) {
            this.requestParam.phone = phoneAreaCode[1];
          } else {
            this.requestParam.phone = '';
          }
        }
      }
    },
    selectAdLevel(item) {
      console.log(item,'item');
      if(item.adLevel===1&&item.adCode!==this.requestParam.level1Code){
          this.requestParam.level1Name = item.name;
          this.requestParam.level1Code = item.adCode;
          this.requestParam.level2Name = '';
          this.requestParam.level2Code = '';
          this.requestParam.level3Name = '';
          this.requestParam.level3Code = '';
      }
      if(item.adLevel===2&&item.adCode!==this.requestParam.level2Code){
        this.requestParam.level2Name = item.name;
        this.requestParam.level2Code = item.adCode;
        this.requestParam.level3Name = '';
        this.requestParam.level3Code = '';
      }
      if(item.adLevel===3&&item.adCode!==this.requestParam.level3Code){
        this.requestParam.level3Name = item.name;
        this.requestParam.level3Code = item.adCode;
      }
      this.$forceUpdate();
    },
    selectPhoneArea(item) {
      let phoneAreaCode = item.phoneAreaCode;
      let phoneAreaCodeArr = phoneAreaCode.split("-");
      this.requestParam.phoneAreaCode = phoneAreaCodeArr[0];
      if(phoneAreaCodeArr.length>1) {
        this.requestParam.phone = phoneAreaCodeArr[1];
      }else{
        this.requestParam.phone = '';
      }
    },
    openAdLevel2(){
      if(this.requestParam.level1Code){
        this.$refs.adLevelPopup.open(this.$i18n.zhToGlobal(this.stateArea.adLevel2Name),this.stateArea.code,this.requestParam.level1Code);
        return;
      }
      uni.showToast({
        title: this.$i18n.zhToGlobal('未选择')+":"+this.$i18n.zhToGlobal(this.stateArea.adLevel1Name),
        icon: 'none'
      });
    },
    openAdLevel3(){
      if(this.requestParam.level2Code){
        this.$refs.adLevelPopup.open(this.$i18n.zhToGlobal(this.stateArea.adLevel3Name),this.stateArea.code,this.requestParam.level2Code);
        return;
      }
      uni.showToast({
        title: this.$i18n.zhToGlobal('未选择')+":"+this.$i18n.zhToGlobal(this.stateArea.adLevel2Name),
        icon: 'none'
      });
    },
    toSave(){
      console.log(this.requestParam,'this.requestParam');
      if(!this.requestParam.stateAreaCode){
        uni.showToast({
          title: this.$i18n.zhToGlobal('未选择国家或地区'),
          icon: 'none'
        });
        return;
      }
      if(this.stateArea.adLevel>=1&&!this.requestParam.level1Code){
        uni.showToast({
          title: this.$i18n.zhToGlobal('未选择')+":"+this.$i18n.zhToGlobal(this.stateArea.adLevel1Name),
          icon: 'none'
        });
        return;
      }
      if(this.stateArea.adLevel>=2&&!this.requestParam.level2Code){
        uni.showToast({
          title: this.$i18n.zhToGlobal('未选择')+":"+this.$i18n.zhToGlobal(this.stateArea.adLevel2Name),
          icon: 'none'
        });
        return;
      }
      if(this.stateArea.adLevel>=3&&!this.requestParam.level3Code){
        uni.showToast({
          title: this.$i18n.zhToGlobal('未选择')+":"+this.$i18n.zhToGlobal(this.stateArea.adLevel3Name),
          icon: 'none'
        });
        return;
      }
      if(!this.requestParam.detail){
        uni.showToast({
          title: this.$i18n.zhToGlobal('未输入详细地址与门牌号'),
          icon: 'none'
        });
        return;
      }
      if(!this.requestParam.phone){
        uni.showToast({
          title: this.$i18n.zhToGlobal('未输入电话号码'),
          icon: 'none'
        });
        return;
      }

      if(!this.requestParam.receiverName){
        uni.showToast({
          title: this.$i18n.zhToGlobal('未输入收货人称呼'),
          icon: 'none'
        });
        return;
      }

      if(!this.requestParam.postalCode){
        uni.showToast({
          title: this.$i18n.zhToGlobal('未输入邮政编码'),
          icon: 'none'
        });
        return;
      }

      uni.showLoading({
        title: this.$i18n.zhToGlobal('保存中'),
      });

      this.$kt.request.send({
        uri: '/business-shop-web/shopAddressInUserAccount/saveSelf',
        method: 'POST',
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$kt.event.emit('addressChange');
          setTimeout(()=>{
            uni.navigateBack();
          },100);
        },
        stateFail: (res) => {
          uni.hideLoading();
          uni.showToast({
            title: res.errMsg,
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>

.box-box {
  padding: 20rpx;
  box-sizing: border-box;
}

.to{
  font-size: 32rpx;
  display: inline-block;
}


.address-card-box {
  position: relative;
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f0f0f0;

  .zip {
    font-size: 24rpx;
    color: #999;
  }

  .edit-icon {
    position: absolute;
    right: 20rpx;
    width: 60rpx;
    height: 60rpx;
    top: 50%;
    transform: translateY(-50%);
  }

  .edit-icon:active {
    transform: translateY(-50%) scale(0.9);
  }


  .lv0-lv1-address {

    .lv0-address {
      display: inline-block;
      font-size: 32rpx;
      color: #333;
      margin-right: 10rpx;
    }

    .lv1-address {
      display: inline-block;
      font-size: 28rpx;
      color: #666;
    }

  }


  .lv2-address {
    font-size: 24rpx;
    color: #999;
  }

  .name-phone {
    font-size: 28rpx;
    color: #666;
  }

  .default {
    display: inline-block;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    border-radius: 20rpx;
    padding: 5rpx 10rpx 5rpx 10rpx;
    margin-left: 10rpx;
  }
}


.bottom {
  position: fixed;
  padding: 20rpx;
  background-color: #fff;
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 999;
  text-align: center;

  .add-address {
    background-color: #000008;
    height: 100rpx;
    color: #fff;
    border-radius: 20rpx;
    line-height: 100rpx;
  }

  .add-address:active {
    background-color: #000008;
    opacity: 0.9;
  }

}

.box{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}

.form-box-item{
  border: 1rpx solid #f0f0f0;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  .title{
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .input-box{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    .to{
      font-size: 32rpx;
      display: inline-block;
    }
    .text{
      display: inline-block;
      font-size: 32rpx;
      color: #666;
      margin-left: 10rpx;
    }
    .text-active{
      color: #000;
    }
    .text-code{
      display: inline-block;
      font-size: 24rpx;
      color: #999;
    }
    .input{
      width: 100%;
      outline: none;
      font-size: 32rpx;
      padding: 10rpx;
      box-sizing: border-box;
      min-height: 60rpx;
      border-bottom: 1rpx solid #f0f0f0;
    }
  }
}

.form-box-item:active{
  opacity: .8;
}

.default-address{
  position: relative;
  font-size: 30rpx;
  display: inline-block;
  color: #666666;
  margin-bottom: 40rpx;
  padding-right: 60rpx;
  .switch{
    position: absolute;
    right: 0;
    top:12rpx;
  }
}


.sel-btn{
  font-size: 32rpx;
  color: #666;
  padding: 20rpx;
  border: 1rpx solid #f0f0f0;
  border-radius: 20rpx;
  text-align: center;
}

.is-sel-btn{
  color: #000;
}
</style>
